<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>三种定位</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" media="screen" href="main.css" />
    <script src="main.js"></script>
  <style type="text/css">

   *{
       margin: 0;
       padding: 0;
   }
      /* div{
          width: 300px;
          height: 300px;
          background-color: aqua; */
          /* position:static;   静态定位 静态定位就是元素标准流的显示方式。 */
          /* left: 50px; */
          /* position:absolute; */
          /* 绝对定位特点：
    ☞当给一个单独的元素设置绝对定位，以浏览器左上角（body）为基准设置定位的。
    ☞当盒子发生嵌套关系的时候，如果父盒子没有设置定位，子盒子设置定位以浏览器左上角为基准设置定位。
    ☞当盒子发生嵌套关系的时候，如果父盒子设置定位，子盒子设置定位父盒子左上角为基准设置定位。
     ☞给盒子设置了绝对定位，该盒子不占位置（脱标）
 	   ☞给行内元素设置绝对定位后，该元素转化为了行内块元素


注意：
  元素设置了绝对定位后，通过具体的方位名称可以随便设置元素的位置。 */

          /* right: 50px; */
          /* left: 100px;
          top: 100px;
      }
   */



       .one{
				 width: 300px;
				 height: 300px;
				 background-color: #660EE9;
				 margin-left: 400px;
				 margin-top: 300px;

				 position: absolute;
                 /* ☞当盒子发生嵌套关系的时候，如果父盒子设置定位，子盒子设置定位父盒子左上角为基准设置定位。 */

			}
            .two{
				 width: 100px;
				 height: 50px;
				 background-color: red;

	 			 position: absolute;
				 left: 10px; 
                /*  ☞当盒子发生嵌套关系的时候，如果父盒子没有设置定位，子盒子设置定位以浏览器左上角为基准设置定位。
                 */
			}



  </style>

</head>
<body>
    <div class="one">

        <div class="two">

        </div>
    </div>
    
</body>
</html>